<template>
  <!-- 精彩话题组件 -->
  <div class="Topic_all_box">
    <div class="Topic_First_Box">
      <span class="Topic_tittle">精彩话题</span>
      <ul>
        <li class="onclick_button">众筹大家谈</li>
        <li>大咖评测</li>
      </ul>
    </div>
    <div class="Topci_Secnd_box">
      <div class="Topic_margin_box"></div>

      <div
        class="Second_Message_box"
        v-for="(item, index) in 6"
        :key="index"
        @click="goDetail"
      >
        <div class="p">
          <a href="">
            <img 
            class="img_goods_url"
              :src="ImgURl"
              alt=""
            />
          </a>
        </div>
        <h3 style="font-family:'Microsoft YaHei';font-weight:normal">
          小钱包:梦想再小也是梦想
        </h3>
        <div class="Message_Secnd">
          <img
            :src="ImgURl"
            alt=""
            class="Second_Img"
          />
          <div class="Message_second_name">
            <span>名字宇轩宇轩宇轩</span>
            <!-- <ivu-icon-Icon type="calendar" size="20px"></ivu-icon-Icon> -->
            <span>2020-6-27</span>
            <span>2001</span>
            <!-- <Icon type="chatbox"></Icon> -->
          </div>
          <p class="Font_message">
            洛川苹果甲天下，吃过真正洛川苹果的人会知道，盛名之下绝非凡品，绝对是有口皆碑。
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      ImgURl:'https://t9.baidu.com/it/u=583874135,70653437&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1594573534&t=c287bf7feecd6bdfc9543c6320162aa5'
    }
  },
  methods: {
    goDetail() {
      this.$router.replace("/front/clubDetails");
    },
  },
};
</script>

<style scoped>
.img_goods_url{
  width: 100%;
  height: 100%;
}
.Topic_all_box {
  background-color: #fff;
  margin-top: 40px;
}
.Topic_First_Box {
  height: 50px;
  border-bottom: 1px solid #eee;
  /* float: left; */
}
.Topci_Secnd_box {
  /* height: 875px; */
  /* float: left; */
  background-color: white;
}
.Second_Message_box {
  height: 175px;
  border-bottom: 1px dashed #eee;
  /* float: left; */
  width: 680px;
  overflow: hidden;
  padding: 20px 0;
  /* position: relative; */
  width: 94%;
  margin-left: 3%;
}
.Topic_tittle {
  height: 50px;
  line-height: 50px;
  padding: 0 16px;
  font-size: 18px;
  font-weight: normal;
  color: #333;
  overflow: hidden;
  font-family: "PingFang SC";
}
.Topic_First_Box ul {
  float: right;
  margin-top: 5px;
}
.Topic_First_Box ul li {
  height: 38px;
  cursor: pointer;
  line-height: 32px;
  font-size: 16px;
  text-align: center;
  padding: 4px 20px;
  position: relative;
  float: left;
  list-style: none;
  /* color: black; */
}
.onclick_button {
  color: #fff;
  background-color: #ec4c42;
}
.Topic_margin_box {
  height: 10px;
}
.p {
  width: 196px;
  height: 130px;
  display: block;
  float: left;
  position: relative;
  margin-right: 20px;
}
.Second_Img {
  border-radius: 50% 50%;
  width: 32px;
  height: 32px;
  /* position: relative; */
  top: -3px;
  float: left;
}
.Message_second_name {
  float: left;
  line-height: 32px;
  padding-left: 8px;
  /* line-height: 30px; */
  color: #9c9c9c;
  font-size: 12px;
}
.Message_Secnd {
  width: 75%;
  /* height: 55%; */
  margin-left: 25%;
}
.Font_message {
  line-height: 26px;
  padding-top: 50px;
  font-size: 14px;
  color: rgb(153, 153, 153);
  position: absolute;
  padding-left: 3%;
  width: 40%;
}
</style>
